<template>
    <div class="banner">
            <div class="banner-img" v-for="(v,index) in  bannerArr"  :style=" bannerArr[index] " :key="index" v-show="myIndex==index">

                <ul>
                    <li v-for="(v,index) in  bannerArr" @click='setBgc(index)' :class="myIndex==index?'liBgc':''" :key="index"></li>
                </ul>

            </div>
        </div>
</template>

<script>
export default {
    data(){
        return{
            bannerArr:[
                {
                    backgroundImage:'url(https://imgcps.jd.com/ling4/10042489330541/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-60b4acacfe543e8ec85e6185/ef1a4f27/cr_1125x449_0_166/s/q70.jpg)'
                },
                {
                    backgroundImage:'url(https://m15.360buyimg.com/mobilecms/jfs/t1/186496/16/31353/81546/6395bd67E8b455fdd/566b77bacc292608.jpg!cr_1125x449_0_166!q70.jpg)'
                },
                {
                    backgroundImage:'url(https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/19535/26/20349/38863/63aa4f80Fa0f42c16/e8006c8573dcf124.jpg!cr_1053x420_4_0!q70.jpg)'
                },
                {
                    backgroundImage:'url(https://m15.360buyimg.com/mobilecms/jfs/t1/199849/26/30938/194465/63be50f8Ffe5ffad1/24dfe4b51b7c8a00.jpg!cr_1053x420_4_0!q70.jpg)'
                }

            ],
            //轮播图下标
            myIndex:0,
            timer:'',
        } 
    },
    methods:{
        //轮播图的小圆点
            setBgc(index){
                this.myIndex = index;
            },
        },
    watch:{
            myIndex:{
                handler(){
                    clearTimeout(this.timer)
                    this.timer = setTimeout(() => {
                        this.myIndex++
                        if(this.myIndex>this.bannerArr.length-1){
                            this.myIndex=0
                        }
                    }, 1000);
                },
                immediate:true
            },
        } 
}
</script>

<style>
    .banner {
        background: #c82e29;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        padding: 0 2.66666667vw;
        height: 25.33333333vw;
        position: relative;
        margin-bottom: 13.33333333vw;
        margin-top: -3.9vw;
    }
    .banner .banner-img {
        height: 37.6vw;
        width: 93.33333333vw;
        border-radius: 1.33333333vw;
        background-size: contain;
        position: absolute;
        right: 2.66666667vw;
    }
    .banner .banner-img li {
        border-radius: 50%;
        border: 1px solid #757575;
        height: 1.33333333vw;
        width: 1.33333333vw;
        margin-right: 1.33333333vw;
        opacity: 0.7;
    }
    .banner .banner-img ul {
        position: absolute;
        right: 45%;
        bottom: 1.86666667vw;
        display: flex;
    }
    .liBgc {
        background-color: red;
    }
</style>